<template>
  <div class="mainBox">
    <pageTitle Title="商品管理"></pageTitle>
    <div class="searchBar">
      <el-select
        v-model="batch"
        clearable
        class="mySelect1 m-2"
        placeholder="请选择考试批次"
      >
        <el-option
          v-for="item in store.batchList"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
    </div>
    <div class="tableBar">
      <MyTable :tableData="tableData">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </MyTable>
      <Pagination :total="tableData.length"></Pagination>
    </div>
  </div>
</template>

<script setup>
import useBatchStore from '@/store/batchStore';
const store = useBatchStore();
const batch = ref('');

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
];
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]);
</script>

<style lang="scss" scoped>
@import '@/assets/css/mycss.css';
</style>
